<template>
    <div class="flowChartContent">
        <div class="title_tab">
            <div class="module_name">立井施工工程动态流程图</div>
            <img src="@/assets/bigScreen/icons/center/center_line.png" alt="">
            <div class="tab_group">
                <div @click="tabIndex = index" :class="tabIndex == index ? 'tab_item_active' : 'tab_item'"
                    v-for="(item, index) in tabData" :key="index">
                    {{ item.label }}
                </div>
            </div>
        </div>
        <div class="bottom_img">
            <img src="@/assets/bigScreen/icons/center/bottom_img.png" alt="">
        </div>
    </div>
</template>

<script>


export default {
    components: {
    },
    data() {
        return {
            tabIndex: 0,
            tabData: [
                {
                    label: '立井施工工程动态流程图'
                }, {
                    label: '项目介绍视频'
                }, {
                    label: 'BIM建模背景'
                }
            ]
        };
    },
    mounted() {
        this.progresss = 66
    },
    methods: {

    },
};
</script>

<style scoped lang="scss">
@font-face {
    font-family: 'kk';
    src: url('../../../../../assets/font/kuaikanshijieti-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'al';
    src: url('../../../../../assets/font/Alibaba-PuHuiTi-Bold_0.ttf');
    font-weight: normal;
    font-style: normal;
}

.flowChartContent {
    width: 100%;

    .title_tab {
        width: 100%;
        padding: 0 1.5%;
        position: relative;

        img {
            width: 100%;
        }

        .module_name {
            width: 30%;
            position: absolute;
            left: 4.5%;
            top: -20%;
            font-size: 0.8333vw;
            font-weight: 400;
            letter-spacing: 0.4px;
            color: transparent;
            background-image: linear-gradient(180deg, rgba(153, 253, 255, 1) 0%, rgba(13, 110, 255, 1) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            font-family: kk;

        }

        .tab_group {
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            position: absolute;
            right: 3%;
            top: 30%;

            .tab_item,
            .tab_item_active {
                font-size: 0.7292vw;
                font-weight: 400;
                letter-spacing: 0.4px;
                color: transparent;
                background-image: linear-gradient(180deg, rgba(153, 253, 255, 1) 0%, rgba(13, 110, 255, 1) 100%);
                -webkit-background-clip: text;
                background-clip: text;
                font-family: kk;
                opacity: 1;
                cursor: pointer;
                margin-left: 2%;
                transition: all 0.3s ease;

            }

            .tab_item {
                opacity: .5;
            }
        }


    }

    .bottom_img {
        width: 100%;
        padding: 0 1.5%;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 96%;
        }
    }



}
</style>